<template>
	<view class="page">
		
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">宠物社区</block>
		</cu-custom>
		
		<view class="margin">
			<view class="margin text-center">
				<view class="margin">文章标题</view>
				<uni-easyinput  placeholder="文章标题(不超过20字)" :inputBorder="true" />
			</view>
			<!-- 图片上传 -->
			<view class="margin">
				<view>
					<uni-data-select :border="true" placeholder="请选择宠物社区" v-model="value" :localdata="range"></uni-data-select>
				</view>
				<view>
					<uni-file-picker limit="1" title="选择封面"></uni-file-picker>
				</view>
			</view>
		</view>
		<view class="margin">
			<uni-row>
				<uni-col :span="18">
					<view style="height: 60rpx;"></view>
				</uni-col>
				<uni-col :span="6">
					<view>
						<button style="background-color: #0081ff;color: white;width: 120rpx;height: 60rpx;line-height: 60rpx;">
							<text style="font-size: 25rpx;">发布</text>
						</button>
					</view>
					
				</uni-col>
			</uni-row>
			
		</view>
		<view class="margin">
			<sp-editor
				editorId="editor"
				:toolbar-config="toolbarConfig"
				@input="inputOver"
				@upinImage="upinImage"
				@init="initEditor"
				@overMax="overMax"
				@exportHtml="exportHtml"
				@addLink="addLink"
			></sp-editor>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				editorIns: null,
				toolbarConfig: {
					excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
					iconSize: '20px',
					iconColumns: 10
				},
				content: '',
				value:"",
				range:[
					{
						value: 0, 
						text: "沙雕集锦"
					},
					{
						value: 1, 
						text: "萌宠故事"
					},
					{
						value: 2, 
						text: "养宠知识"
					},
					{
						value: 3, 
						text: "相亲配对"
					},
				]
			}
		},
		mounted() {},
		destroyed() {},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.once('e_content', (res) => {
				this.content = res.content
			})
		},
		methods: {
			/**
			 * 获取输入内容
			 * @param {Object} e {html,text} 内容的html文本，和text文本
			 */
			inputOver(e) {
				// console.log('==== inputOver :', e)
			},
			/**
			 * 超出最大内容限制
			 * @param {Object} e {html,text} 内容的html文本，和text文本
			 */
			overMax(e) {
				// console.log('==== overMax :', e)
			},
			/**
			 * 编辑器就绪
			 * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
			 * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
			 * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
			 */
			initEditor(editor) {
				this.editorIns = editor // 保存编辑器实例
				this.$nextTick(() => {
					this.preRender()
				})
			},
			preRender() {
				// 初始化编辑器内容
				this.editorIns.setContents({
					html: this.content
				})
			},
			/**
			 * 直接运行示例工程插入图片无法正常显示的看这里
			 * 因为插件默认采用云端存储图片的方式
			 * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
			 * @param {Object} tempFiles
			 * @param {Object} editorCtx
			 */
			upinImage(tempFiles, editorCtx) {
				/**
				 * 本地临时插入图片预览
				 * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
				 * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
				 * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
				 */
				// #ifdef MP-WEIXIN
				// 注意微信小程序的图片路径是在tempFilePath字段中
				editorCtx.insertImage({
					src: tempFiles[0].tempFilePath,
					width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
					success: function () {}
				})
				// #endif
			
				// #ifndef MP-WEIXIN
				editorCtx.insertImage({
					src: tempFiles[0].path,
					width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
					success: function () {}
				})
				// #endif
			
				/**
				 * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
				 * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
				 */
				tempFiles.forEach(async (item) => {
				  uni.showLoading({
				    title: '上传中请稍后',
				    mask: true
				  })
				  let upfile = await uniCloud.uploadFile({
				    filePath: item.path,
				    // 同名会导致报错 policy_does_not_allow_file_overwrite
				    // cloudPath可由 想要存储的文件夹/文件名 拼接，若不拼文件夹名则默认存储在cloudstorage文件夹中
				    cloudPath: `cloudstorage/${item.name}`,
				    cloudPathAsRealPath: true
				  })
				  editorCtx.insertImage({
				    src: upfile.fileID,
				    width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
				    success: function () {
				      uni.hideLoading()
				    }
				  })
				})
			},
			/**
			 * 导出
			 * @param {string} e 导出的html内容
			 */
			exportHtml(e) {
				uni.navigateTo({
					url: '/pages/star/preview',
					success(res) {
						res.eventChannel.emit('e-transmit-html', {
							data: e
						})
					}
				})
			},
			/**
			 * 添加超链接
			 * @param {Object} e { text: '链接描述', href: '链接地址' }
			 */
			addLink(e) {
				// console.log('==== addLink :', e)
			}
		}
	}
</script>

<style>

</style>
